<template>
  <div class="tab-panel">
    <!--工具栏-->
    <el-form :inline="true" size="small" class="demo-form-inline" label-position="right">
      <el-form-item label="关键词:">
        <el-input
          v-model="query.keywords"
          placeholder="手机号/微信昵称"
          clearable
          class="filter-item"
          @keyup.enter.native="toQuery"
        />
      </el-form-item>
      <el-form-item label="等级角色:">
        <el-select
          v-model="query.member_type"
          clearable
          class="filter-item"
          style="width: 200px"
        >
          <el-option
            v-for="(item,key) in queryMemberOptions"
            :key="key"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="reset">重置</el-button>
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="toQuery"
        >查询</el-button>
      </el-form-item>

    </el-form>
    <!-- 操作栏 -->
    <div class="operate-container">
      <div />
      <div>
        <el-button
          :loading="exportSearchLoading"
          class="filter-item"
          type="primary"
          size="mini"
          @click="exportSearch"
        >导出（查询）</el-button>
        <el-button
          :loading="exportCheckedLoading"
          :disabled="$refs.table && $refs.table.selection.length === 0"
          class="filter-item"
          type="warning"
          size="mini"
          @click="exportChecked"
        >导出（勾选）</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" ref="table" :data="data" :fit="true" size="small">
      <el-table-column type="selection"/>
      <el-table-column prop="phone" min-width="120px" label="手机号码"/>
      <el-table-column prop="nickname" show-overflow-tooltip label="微信昵称"/>
      <el-table-column prop="user_name" show-overflow-tooltip label="姓名"/>
      <el-table-column label="等级角色">
        <template slot-scope="scope">
          <span v-if="scope.row.member_type == 1">
            推广员
          </span>
          <span v-else-if="scope.row.member_type == 2">团长</span>
          <span v-else-if="scope.row.member_type == 3">省长</span>
          <span v-else>客户 </span>
        </template>
      </el-table-column>
      <el-table-column prop="total_order" width="98px" label="累计订单" />
      <el-table-column width="98px" label="累计佣金" >
        <template slot-scope="scope">
          {{ (scope.row.total_commission).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="be_settled_order" width="120px" label="待结算订单"/>
      <el-table-column prop="be_settled_commission" width="120px" label="待结算佣金"/>
      <el-table-column prop="settled_order" width="120px" label="已结算订单" />
      <el-table-column prop="settled_commission" width="120px" label="已结算佣金" />
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      background
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>
<script>
import initData from '@/mixins/initData'
import { parseTime, parseDate, downLoadExcel } from '@/utils/index'
import { exportUser } from '@/api/distributionStatistics'
import Treeselect from '@riophae/vue-treeselect'
import IconSelect from '@/components/IconSelect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'DistPerformance',
  components: { Treeselect, IconSelect },
  mixins: [initData],
  data() {
    return {
      menus: [],
      loading: false,
      dialog: false,
      company_show: true,
      queryOrderDate: [new Date().setHours(0, 0, 0, 0), new Date()],
      queryMemberOptions: [
        { value: '1', name: '分销员' },
        { value: '2', name: '团长' },
        { value: '3', name: '省长' }
      ],
      exportSearchLoading: false,
      exportCheckedLoading: false
    }
  },
  created() {
    if (this.company_id === 443 || this.company_id === 102) {
      this.company_show = false
    }
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = '/report/user-list'
      this.addParams()
      return true
    },
    subtraction(v1, v2) {
      return v1 - v2
    },
    formatMoney(row, column, cellValue, index) {
      return cellValue.toFixed(2)
    },
    addParams() {
      const query = this.query
      const sort = 'settled_commission,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      if (query.keywords) {
        this.params['keywords'] = query.keywords
      }
      if (query.member_type) {
        this.params['member_type'] = query.member_type
      }
    },
    formatOrderTime(timeStamp) {
      const orderTime = new Date(Number(timeStamp))
      return parseDate(orderTime, true)
    },
    formatCoupon(content, key) {
      let [str, str1] = ''
      if (key) {
        str1 = '密钥:' + key
      }
      if (content) {
        str = content + ',' + str1
      } else {
        str = str1
      }
      return str
    },
    formatState(row, column, cellValue, index) {
      return this.queryStateOptions[cellValue]
    },
    formatFinanceState(row, column, cellValue, index) {
      return this.queryFinanceOptions[cellValue]
    },
    formatAccountState(row, column, cellValue, index) {
      return this.queryAccountOptions[cellValue]
    },
    reset() {
      this.query = {}
      this.init()
    },
    getSelected() {
      const user_ids = []
      const selectArr = this.$refs.table.selection
      for (let i = 0; i < selectArr.length; i++) {
        user_ids.push(selectArr[i].user_id)
      }
      return user_ids
    },
    // 导出勾选
    exportChecked() {
      this.exportCheckedLoading = true
      const user_ids = this.getSelected()
      this.params = { user_ids: user_ids.join(',') }
      exportUser(this.params).then((res) => {
        this.exportCheckedLoading = false
        downLoadExcel(res, '分销员业绩统计.xls')
      }).catch(err => {
        this.exportCheckedLoading = false
        console.log(err)
      })
    },
    // 导出查询
    exportSearch() {
      this.exportSearchLoading = true
      this.addParams()
      exportUser(this.params).then((res) => {
        this.exportSearchLoading = false
        downLoadExcel(res, '分销员业绩统计.xls')
      }).catch(err => {
        this.exportSearchLoading = false
        console.log(err)
      })
    },
    formatMemberType(row, column, cellValue, index) {
      return cellValue === 0 ? '非店主' : cellValue === 1 ? '店主' : ''
    }
  }
}
</script>

<style scoped lang="scss">
.tab-panel{
  padding-bottom: 2rem;
}
</style>
